<template>
  <div class="channel">
    <gl-breadcrumb class="mb15"
                   text="渠道列表"></gl-breadcrumb>
    <div class="main">
      <el-button type="primary"
                 @click="openAdd"
                 icon="el-icon-plus">新建</el-button>
      <div class="table">
        <gl-table :columns='list'
                  :data="lists"
                  class="gl-table"
                  @button="changeButton">
        </gl-table>
      </div>
      <gl-pagination :total='totals'
                     class="page"
                     :curr="curr"
                     :size="limits"
                     @callback='changePage'></gl-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="accessEdit"
               class="w75 mlr-auto "
               @close='closeDialog'>
      <span slot="title"
            style="fontSize:14px;">{{num==1?'编辑渠道':'新建渠道'}}</span>
      <div class="orderform">
        <gl-form :form='form'
                 :form-label='formLabel'
                 :must="must"
                 :rule='rule'
                 ref='form'
                 @change="formSelectChange">

        </gl-form>
      </div>
      <span slot="footer">
        <el-button @click="accessEdit = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitadmin">确 定</el-button>
      </span>
    </el-dialog>
    <gldelbtn :show="isShow"
              :text='text'
              @cancel="canceled"
              @determine='defineCallback'></gldelbtn>
  </div>
</template>

<script>
import tools from '../../../../mixins/tools/index'
export default {
  name: 'Channel',
  components: {},
  data() {
    return {
      list: [
        { label: '渠道ID', prop: 'channel_id' },
        { label: '渠道名称', prop: 'channel_name' },
        { label: '渠道描述', prop: 'remark', type: 'textarea' },
        { label: '创建日期', prop: 'create_time' },
        { label: '状态', prop: 'status' },
        { label: '操作', prop: '', btns: ['编辑', '删除'] }
      ],
      lists: [],
      accessEdit: false, // 控制弹窗
      form: {
        status: 1
      },
      formLabel: [
        {
          label: '渠道名称:',
          prop: 'channel_name',
          inputType: 'text',
          placeholder: '请输入'
        },
        {
          label: '状态:',
          prop: 'status',
          radio: [{ label: '正常', value: 1 }, { label: '禁用', value: 2 }]
        },
        {
          label: '描述:',
          prop: 'remark',
          type: 'textarea',
          text: 'ueditor',
          placeholder: '请输入'
        }
      ],
      must: ['channel_name', 'status'],
      num: '',
      totals: '',
      curr: 1,
      limits: 10,
      channel_id: '',
      isShow: false,
      text: ''
    }
  },
  computed: {},
  watch: {
    num() {
      if (this.num != 1) {
        this.form = { status: 1 }
      }
    }
  },
  methods: {
    // 弹窗回调
    closeDialog() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    // 操作
    changeButton(val) {
      //   console.log(val)
      this.channel_id = val.row.channel_id
      if (val.index == 0) {
        // console.log('编辑')
        this.accessEdit = true
        this.num = 1
        let new_form = Object.assign({}, val.row)
        new_form.status = new_form.status == '正常' ? 1 : 2
        new_form.remark = new_form.remark == '无' ? '' : new_form.remark
        this.form = new_form
      } else {
        // console.log('删除');
        this.isShow = true
        this.text = val.row.channel_name
      }
    },
    // 提交
    submitadmin() {
      if (this.$refs.form.validate()) {
        if (this.num == 1) {
          this.subEdit()
        } else {
          this.subAdd()
        }
      }
    },
    // 新建
    openAdd() {
      this.num = ''
      this.form = { status: 1 }
      this.accessEdit = true
    },
    // 分页
    changePage(val) {
      // console.log(val);
      this.curr = val.curr
      this.limits = val.size
      this.getChannel()
    },
    // 账号列表
    getChannel() {
      let params = {
        curr: this.curr,
        limits: this.limits,
        // customer_id: 0
      }
      this.http
        .$post('admin/channel.Api/new_lists', params,{loading:true})
        .then(res => {
          this.totals = res.total
          this.lists = res.list
          this.lists.map(val => {
            if (val.status == 1) {
              val.status = '正常'
            } else if (val.status == 2) {
              val.status = '禁用'
            }
            val.remark =
              val.remark == '' || val.remark == null ? '无' : val.remark

            // val.create_time = tools.formatDate(val.create_time)
          })
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 新建提交
    subAdd() {
      let params = this.form
     
      this.http
        .$post('admin/channel.Api/add', params)
        .then(res => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.accessEdit = false
          this.getChannel()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 编辑提交
    subEdit() {
      let params = {
        channel_id: this.channel_id,
        channel_name: this.form.channel_name,
        status: this.form.status,
        remark: this.form.remark
      }
      this.http
        .$post('admin/channel.Api/edit', params)
        .then(res => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.accessEdit = false
          this.getChannel()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 验证码确定
    defineCallback(code, vCode) {
      if (vCode == code) {
        // console.log('删除成功')

        this.http
          .$post('admin/channel.Api/delete', {
            channel_id: this.channel_id
          })
          .then(res => {
            this.getChannel()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
        this.isShow = false
      } else {
        this.$message.error('验证码不正确')
      }
    },
    // 关闭
    canceled() {
      this.isShow = false
    }
  },
  created() {},
  mounted() {
    this.getChannel()
  }
}
</script>
<style lang='less' scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}

/deep/ .edui-default .edui-toolbar {
  line-height: 0;
}
.channel {
  .main {
    // width: 918px;
    margin-top: 20px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 20px;

    .table {
      padding-top: 20px;
    }
    .page {
      padding-bottom: 40px;
    }
  }
}
</style>